import React, { Component } from 'react';
import {
    View,
    Text,
    StyleSheet,
} from 'react-native'
import moment from 'moment'
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';

import Style from '../../utils/style/style'
import Loading from '../../views/loading';
import CellItem from '../../views/cellItem';
import CheckStateItem from '../../views/checkStateItem';
import { initialData } from '../../actions/CheckAction';


class CheckDetail extends Component {
    constructor(props) {
        super(props);
    }
    static navigationOptions = {
        title: '盘点结果',
    };

    componentDidMount() {
        const item = this.props.navigation.getParam('item');
        this.props.initialData(item);
    }
    _renderDetail(item, index, length) {
        const noBorder = index == length - 1 ? true : false;
        return (
            <CheckStateItem
                key={item.state}
                item={item}
                showAngle={true}
                noBorder={noBorder}
                pressItem={() => this._pressItem(item)}
            />
        )
    };
    _pressItem(item) {
        // alert(item.state)
        const itemStr = JSON.stringify(item)
        const { data } = this.props;
        this.props.navigation.navigate('Result', { InventoryId: data.inv_id, inv_code: data.inv_code, inv_time: data.inv_time, item: itemStr })
    }
    render() {
        const { data } = this.props;
        let time;
        let dataList;
        if (data) {
            time = moment(data.inv_time).format('YYYY-MM-DD HH:mm:ss');
            detailList = [
                {
                    iconName: 'minus-square',
                    color: '#f6383a',
                    title: '缺失',
                    desc: '盘点数量与少于库存数量',
                    value: data.Lost,
                    state: 1,
                },
                {
                    iconName: 'plus-square',
                    color: '#ff9800',
                    title: '冗余',
                    desc: '盘点到已出库的序列号',
                    value: data.Redundancy,
                    state: 2,
                },
                {
                    iconName: 'question-circle',
                    color: '#607d8b',
                    title: '未知',
                    desc: '未入库的序列号',
                    value: data.inv_unknown,
                    state: 3,
                },
                {
                    iconName: 'check-square',
                    color: '#1aad19',
                    title: '正常',
                    desc: '盘点数量与库存数量一致',
                    value: data.Normal,
                    state: 4
                }
            ]
        }

        return (
            this.props.loading ?
                <Loading /> : this.props.data ?
                    <View style={styles.container}>
                        <View style={Style.gap} />
                        <CellItem title="盘点号" content={data.inv_code} />
                        <CellItem title="盘点时间" content={time} noBorder={true} />
                        <View style={[Style.gap, styles.gapTop]} />
                        {
                            detailList.map((item, index) => this._renderDetail(item, index, detailList.length))
                        }
                        <View style={Style.bottom} />
                    </View> : null
        )
    }
}

const styles = StyleSheet.create({
    container: {
        width: Style.width,
        height: Style.ViewHeightD,
        backgroundColor: '#fff',
    },
    gapTop: {
        borderTopWidth: 1,
    },
})

export default connect(
    state => ({
        loading: state.CheckDetail.loading,
        data: state.CheckDetail.data,
    }),
    dispatch => ({ initialData: bindActionCreators(initialData, dispatch) })
)(CheckDetail)